<template>
    <span :class="{ 'is-error': isError }">
        {{ value || '-' }}
        <slot></slot>
    </span>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    props: {
        label: [String],
        value: [String, Number],
    },
    data () {
        return {
            isError: false
        }
    },
    computed: {
        ...mapGetters(['ecgConfig']),
    },
    watch: {
        value: {
            immediate: true,
            handler: function (value) {
                if (!value) return 
                const currentConfig = this.ecgConfig[this.label]
                if (value > currentConfig.max || value < currentConfig.min) {
                    this.isError = true
                }
            }
        }
    }
}
</script>

<style>
.is-error{
    color: #BF1414;
}
</style>